import React, { Component } from 'react';
import { Card, Form, Button, Input } from 'antd';
import { connect } from 'dva';
import Authorized from '../../utils/Authorized';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;

const { Secured } = Authorized;

// use permission as a parameter
const havePermissionAsync = new Promise(resolve => {
  // Call resolve on behalf of passed
  setTimeout(() => resolve(), 1000);
});
@Secured(havePermissionAsync)
@connect(({ gpsintervaltime, loading }) => ({
  gpsintervaltime,
  submitting: loading.models.gpsintervaltime,
}))
@Form.create()
export default class GpsIntervalTime extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'gpsintervaltime/getParam',
      payload: { paramName: 'gpsUpdateIntvTime' },
    });
  }

  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        //console.log('Received values of form: ', values);
        this.props.dispatch({
          type: 'gpsintervaltime/saveParam',
          payload: { ...values },
        });
      }
    });
  };

  render() {
    const { submitting, form, gpsintervaltime } = this.props;
    const { getFieldDecorator } = form;
    const { gpsParamInfo } = gpsintervaltime;
    const paraValue = gpsParamInfo.paramVal;

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 20, offset: 0 },
        sm: { span: 10, offset: 5 },
      },
    };

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Form style={{ marginTop: 8 }}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('paramName', {
                initialValue: 'gpsUpdateIntvTime',
              })(<Input type="hidden" />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 5 }} label="时间间隔（秒）">
              {getFieldDecorator('paramVal', {
                initialValue: paraValue,
                rules: [{ required: true, message: '请输入整数...', pattern: RegExp('^[0-9]*$') }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('paramType', {
                initialValue: '1',
              })(<Input type="hidden" />)}
            </FormItem>
            <FormItem {...submitFormLayout}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={this.handleSubmit}
                loading={submitting}
              >
                保存
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
